/**
  * @description: 选择配送方式
*/
<template>
  <div class="pages">
    <div class="main-div">
      <div class="title">选择配送方式</div>
      <div>
        <div
          v-if="
            orderInfo.shipTypeArr &&
            orderInfo.shipTypeArr.indexOf('1') != '-1' &&
            orderInfo.shipTypeArr.indexOf('2') != '-1'
          "
        >
          <van-radio-group v-model="radio" @change="changeClick">
            <van-cell-group>
              <div>
                <van-cell title="快递到付" clickable @click="radio = '1'">
                  <template #right-icon>
                    <van-radio name="1" />
                  </template>
                </van-cell>
                <span class="tips">收到快递时需要由本人支付快递费</span>
                <van-divider />
              </div>

              <div>
                <van-cell title="用户自取" clickable @click="radio = '2'">
                  <template #right-icon>
                    <van-radio name="2" />
                  </template>
                </van-cell>
                <span class="tips"
                  >具体配送规则，请查看商品参阅下方的说明
                </span>
              </div>
            </van-cell-group>
          </van-radio-group>
        </div>

        <div v-else>
          <van-radio-group v-model="radioKd">
            <van-cell-group>
              <div
                v-if="
                  orderInfo.shipTypeArr &&
                  orderInfo.shipTypeArr.indexOf('1') != '-1'
                "
              >
                <van-cell title="快递到付" clickable @click="radio = '1'">
                  <template #right-icon>
                    <van-radio name="1" />
                  </template>
                </van-cell>
                <span class="tips">收到快递时需要由本人支付快递费</span>
                <van-divider />
              </div>
            </van-cell-group>
          </van-radio-group>
          <van-radio-group v-model="radioZq">
            <van-cell-group>
              <div
                v-if="
                  orderInfo.shipTypeArr &&
                  orderInfo.shipTypeArr.indexOf('2') != '-1'
                "
              >
                <van-cell title="用户自取" clickable @click="radio = '2'">
                  <template #right-icon>
                    <van-radio name="2" />
                  </template>
                </van-cell>
                <span class="tips"
                  >具体配送规则，请查看商品参阅下方的说明
                </span>
              </div>
            </van-cell-group>
          </van-radio-group>
        </div>
        <van-radio-group
          v-model="radio2"
          v-if="
            orderInfo.shipTypeArr && orderInfo.shipTypeArr.indexOf('3') != '-1'
          "
        >
          <van-cell title="到店使用" clickable @click="radio = '3'">
            <template #right-icon>
              <van-radio name="3" />
            </template>
          </van-cell>
          <span class="tips">具体配送规则，请查看商品参阅下方的说明 </span>
        </van-radio-group>

        <van-radio-group
          v-model="radio3"
          v-if="
            orderInfo.shipTypeArr && orderInfo.shipTypeArr.indexOf('4') != '-1'
          "
        >
          <van-cell title="自动到账" clickable @click="radio3 = '4'">
            <template #right-icon>
              <van-radio name="4" />
            </template>
          </van-cell>
          <span class="tips">具体配送规则，请查看商品参阅下方的说明 </span>
        </van-radio-group>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/utils/bus";
export default {
  name: "distributionMode",
  props: {
    orderInfo: Object,
    shipTypeArr: Array,
  },
  data() {
    return {
      radio: "1",
      radio2: "3",
      radio3: "4",
      radioKd: "1", // 快递到付
      radioZq: "2", // 用户自取
    };
  },
  created() {
    this.radio = this.$route.query.addressState || "1";
  },
  methods: {
    changeClick() {
      Bus.$emit("sendBybus", this.radio);
    },
  },
};
</script>
<style scoped lang="less">
.pages {
  margin-top: 12px;
  .main-div {
    background: #fff;
    border-radius: 10px;
    padding: 16px 12px;
    .title {
      padding-left: 6px;
      font-size: 16px;
      line-height: 20px;
      height: 18px;
      margin: 10px 0;
      border-left: 4px solid #51afb1;
      font-weight: 700;
      color: #000000;
    }
    .tips {
      padding-left: 16px;
      color: rgba(0, 0, 0, 0.4);
      font-size: 12px;
    }
    .van-cell {
      font-size: 16px;
      font-weight: 500;
      color: #000000;
    }
    .van-divider {
      margin: 8px 10px 0 10px;
    }
    .van-hairline--top-bottom::after,
    .van-hairline-unset--top-bottom::after {
      border: 0px;
    }
    .van-cell::after {
      border-bottom: 0px;
    }
  }
}
</style>
